<template>
	<div>
		<div>HomePage</div>
		<div>======欢迎======</div>
		<div>
			<span>{{userInfo.name}}</span>
			<br>
			<span>{{userInfo.age}}</span>
			<br>
			<span>{{userInfo.like}}</span>
		</div>
		<div>======欢迎======</div>

		<p>恭喜您选购了{{count}}件商品</p>
		<p>将自动成为我们的:{{getUserLv}}级用户</p>

		<div>
			<button v-on:click="gotoChangeInfo" v-bind:class="btn">修改用户信息</button>
			<button v-on:click="gotoShopping" v-bind:class="btn">去选购</button>
		</div>
	</div>

</template>

<script>

    import {mapGetters} from 'vuex'

    export default {
        name: "Home",
        methods: {
            gotoChangeInfo: function () {
                this.$router.push('/changeInfo');
            },
            gotoShopping: function () {
                this.$router.push('/shopping');
            }
        },
        data: function () {
            return {
                btn:'btn'
            }
        },
        computed: {
            ...mapGetters('buyCar', {count: 'getCount',getUserLv:'getUserLv'}),
            ...mapGetters('userInfo', {userInfo:'getUserInfo'})

        }
    }
</script>

<style scoped>
	.btn{
		background-color: #09c;
		color: #cc9;
		font-size: 30px;
	}

</style>